<div class="others">
  <div class="top-body">
    <div class="fl">
      <h1>搭建自定义模块</h1>
      <span>快速自定义搭建模块，便于记录哦！</span>
      <a nz-button nzSize="large" nzType="link" (click)="showModal()">点击添加模块</a>
    </div>
    <div class="fr">
      <img src="../../../../assets/images/Frame 8@2x.png" alt="">
    </div>
  </div>
  <ul class="other-information ">

    <li *ngFor="let item of memos; let index = index" [ngStyle]="{'background-color': item.color}">
      <div class="top">
        <span>{{item.name}}</span>
        <div class="spacer"></div>
        <a nz-button nzType="link" (click)="editMemo(item)">
          <i class="iconfont icon-edit-fill"></i>
        </a>
        <a nz-button nzType="link" (click)="delMemo(item, index)">
          <i class="iconfont icon-delete-bin-5-line"></i>
        </a>
      </div>
      <div class="bottom">
        <textarea style="border: 0px;background-color: transparent;color: #000; font-size: 16px; height: 100%;" disabled
          nz-input nzBorderless [ngModel]="item.content" [nzAutosize]="{ minRows: 7, maxRows: 8 }"></textarea>
      </div>
    </li>


  </ul>

  <nz-modal [(nzVisible)]="isVisible" nzTitle="自定义模块" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
    [nzOkLoading]="isOkLoading" nzClassName="modal" nzWidth='640px'>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-control [nzErrorTip]="titleErrorTpl">
          <input formControlName="title" nz-input placeholder="请输入模块标题" />
          <ng-template #titleErrorTpl let-control>
            <ng-container *ngIf="control.hasError('required')">
                请填写模块名称
            </ng-container>
            <ng-container *ngIf="control.hasError('maxlength')">
                名称不能超过10个字符
            </ng-container>
        </ng-template>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="请输入模块内容">
          <textarea nz-input formControlName="titleContent" placeholder="请输入模块内容"
            [nzAutosize]="{ minRows: 7, maxRows: 7 }"></textarea>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-modal>

</div>